<!-- 巡检管理-添加巡检计划 -->
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandard" :close-on-click-modal="false" :title="title" width="500px" height="300px">
      <el-form v-loading="formLoading" ref="dialogForm" :model="dialogForm" :rules="rules" label-width="120px">
        <el-form-item label="所属单位" prop="corp_id">
          <el-select :disabled="dialogType==='修改'" v-model="dialogForm.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请选择单位名称" @change="companyChange">
            <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属建筑群" prop="park_id">
          <el-select :disabled="dialogType==='修改'" v-model="dialogForm.park_id" placeholder="请选择所属建筑群">
            <el-option v-for="item in parksList" :key="item.park_id" :label="item.name" :value="item.park_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入计划名称" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-select v-model="dialogForm.leader" placeholder="请选择负责人">
            <el-option v-for="item in userLeaderList" :key="item.uuid" :label="item.nickname" :value="item.uuid" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="start_at">
          <el-date-picker
            :picker-options="pickerOptions0"
            v-model="dialogForm.start_at"
            type="date"
            placeholder="请选择开始时间"/>
        </el-form-item>
        <el-form-item label="任务执行人" prop="workers">
          <el-select v-model="dialogForm.workers" placeholder="请选择任务执行人" multiple>
            <el-option v-for="item in userWorkerList" :key="item.uuid" :label="item.nickname" :value="item.uuid" />
          </el-select>
        </el-form-item>
        <el-form-item label="频次" prop="cycle" class="patrol-frequency">
          <el-input-number v-model="dialogForm.frequency" :min="1" label="请输入次数"/>
          <el-select v-model="dialogForm.cycle" placeholder="请选择">
            <el-option v-for="(key, value) in dateType" :key="key" :label="key" :value="value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormFn">确 定</el-button>
        <el-button type="" @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getSocialUnit } from '@/api/company'
import { parksList } from '@/api/park'
import { inspectionPlansAdd, inspectionPlansUpdate } from '@/api/plan'
import { userLeaderList, userWorkerList } from '@/api/common'
const dateType = {
  '1': '天',
  '2': '周',
  '3': '月',
  '4': '年'
}
export default {
  props: {
    dialogForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogType: {
      type: String,
      default: () => {
        return ''
      }
    },
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      value: '',
      title: '',
      dateType,
      companyList: [],
      // 添加form验证
      rules: {
        corp_id: [{
          required: true,
          message: '请输入所属单位名称',
          trigger: 'change'
        }],
        park_id: [{
          required: true,
          message: '请选择所属建筑群',
          trigger: 'change'
        }],
        name: [{
          required: true,
          message: '请输入计划名称',
          trigger: 'change'
        }],
        leader: [{
          required: true,
          message: '请选择负责人',
          trigger: 'change'
        }],
        start_at: [{
          required: true,
          message: '请选择开始时间',
          trigger: 'change'
        }],
        workers: [{
          required: true,
          message: '请选择任务执行人',
          trigger: 'change'
        }],
        cycle: [{
          required: true,
          message: '请输入次数和单位',
          trigger: 'change'
        }]
      },
      formLoading: false,
      parksList: [],
      userLeaderList: [],
      userWorkerList: []
    }
  },
  watch: {
    dialogType(val) {
      this.init(val)
    }
  },
  created() {
    this.init(this.dialogType)
    this.getSocialUnit()
  },
  methods: {
    init(dialogType) {
      if (this.dialogType === '添加') {
        this.title = '添加巡检计划'
        this.requestFn = inspectionPlansAdd
      } else {
        this.getParksList()
        this.getUserWorkerList()
        this.getserLeaderList()
        this.title = '修改巡检计划'
        this.requestFn = inspectionPlansUpdate
      }
    },
    submitFormFn(val) {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          const that = this
          // that.formLoading = true
          var params = {
            ...that.dialogForm
          }
          params.is_forbidden = params.is_forbidden ? 2 : 1
          delete params['imgUrl']
          params.workers = params.workers.join(',')
          // console.log(JSON.stringify(params))
          this.requestFn(params)
            .then((res) => {
              that.formLoading = false
              const data = res.data
              if (data.code === 40000) {
                that.$message.success(data.message)
                that.$emit('submitForm', that.dialogForm)
              } else {
                that.$message.warning(data.message)
              }
            })
            .catch((err) => {
              console.log(err)
              that.formLoading = false
            })
        }
      })
    },
    // 关闭弹窗
    handleCancel() {
      this.$refs['dialogForm'].resetFields()
      this.$emit('getCancel')
    },
    // 关闭弹窗，不可以删这个方法。不用这个方法点击遮罩层关闭会报错
    handleCloseBindWarnStandard() {
      this.$refs['dialogForm'].resetFields()
      this.$emit('closeBindWarnStandard')
    },
    // 获取建筑群列表
    getParksList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        corp_id: that.dialogForm.corp_id
      }
      parksList(listQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.parksList = []
            data.data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.parksList.push(array[index])
            })
          }
        })
        .catch(() => {
          this.parksList = []
        })
    },
    // 获取负责人
    getserLeaderList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        corp_id: that.dialogForm.corp_id
      }
      userLeaderList(listQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.userLeaderList = []
            data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.userLeaderList.push(array[index])
            })
          }
        })
        .catch(() => {
          this.userLeaderList = []
        })
    },
    // 获取执行人
    getUserWorkerList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        corp_id: that.dialogForm.corp_id
      }
      userWorkerList(listQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.userWorkerList = []
            data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.userWorkerList.push(array[index])
            })
          }
        })
        .catch(() => {
          this.userWorkerList = []
        })
    },
    // 获取单位下拉框
    getSocialUnit() {
      const that = this
      getSocialUnit()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            if (data.data && data.data.length > 0) {
              that.companyList = data.data
            }
          }
        })
        .catch(() => {
        })
    },
    companyChange(value) {
      this.dialogForm.corp_id = value
      this.getParksList()
      this.getUserWorkerList()
      this.getserLeaderList()
      this.dialogForm.leader = ''
      this.dialogForm.park_id = ''
      this.dialogForm.workers = ''
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.patrol-frequency{
  .el-input-number{
    width: 50%;
    float: left;
  }
  .el-select{
    width: 46%;
    float: right;
  }
}
</style>
